<template>
  <div class="box">
    <div class="boxtop">
      <van-nav-bar title="车型选择">
        <template #left>
          <van-icon
            name="arrow-left"
            color="#fff"
            size="18"
            @click="clickLeft"
          ></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <!-- 搜索栏 -->
    <div class="searchbox">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        input-align="center"
      />
      <!-- 折叠面板 -->
      <van-collapse v-model="activeNames">
        <van-collapse-item
          :title="index"
          v-for="(item, index) in this.Yearsmodel"
          :key="index"
        >
          <!-- 循环用里面得数组 -->
          <div
            v-for="(item1, index1) in item"
            :key="index1"
            class="CollapseItembox"
            @click="clickCollapseName(item1)"
          >
            <span class="CollapseText">{{ item1.modelName }}</span>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
<script>
import { CarDetailInfo } from '@/api/user'
import { mapState } from 'vuex'
// 通过映射里面数据CarName
export default {
  data () {
    return {
      value: '',
      Yearsmodel: {},
      activeNames: ['1']
    }
  },
  computed: {
    ...mapState(['CarName'])
  },
  created () {
    this.getAllInfo()
  },
  methods: {
    async getAllInfo () {
      const { data } = await CarDetailInfo({
        seriesId: this.$route.query.serierIn
      })
      console.log(data.data)
      this.Yearsmodel = data.data
    },
    ClickText () {
      console.log('打印搜索栏')
    },
    clickCollapseName (val) {
      console.log(val.modelName)
      this.$store.commit('gainYearModel', val.modelName)
      this.$router.push('/infoedit')
    },
    clickLeft () {
      this.$router.back()
    }
  }
}
</script>
<style lang="less" scoped>
.CollapseItembox {
  width: 375px;
  height: 45px;
  border: 1px solid #f7f8fa;
  line-height: 45px;
  .CollapseText {
    display: inline-block;
    font-style: 14px;
    color: #474748;
  }
}
</style>
